<template>
    <div class="produce" >
        <!-- <div class="imgs" :style="imgstyle"></div> -->
        <img class="imgs" :src="pro.smallImg">
        <div class="content">
        <h2 class="nameC">{{pro.name}}</h2>
        <p class="price">&yen;{{pro.price}}</p>
        </div>
        <img class="add" src="../assets/images/add.png">
    </div>
</template>

<script>
    export default {
        name:'Product',
        props:{
            pro:{
                type:Object,
                default(){
                    return{}
                }
            }
            
        },
    }
</script>

<style lang="less" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .produce{
        display: flex;
        .content{
            padding-left: 15px;
            padding-right: 15px;
            box-sizing: border-box;
        }
        .imgs{
        width: 100px;
        height: 100px;
        background-size: 100%;
        display: inline;
        }
        .nameC{
            margin: 10px 0 40px 0 ;
        }
        .price{
            font-size: 18px;
            color: orangered;
        }
        .add{
            height: 25px;
            width: 25px;
            // position:absolute;
            // right: 20px;
            margin-left: auto;
            margin-top: 70px;
        }
    }
    
    
</style>